<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import IconItem from '@/components/IconItem/index.vue'
import {PostHeadersType, requests } from '@/utils/request';
import { useRouter } from 'vue-router';
const router = useRouter();

const ruleFormRef = ref<FormInstance>()

const formMode = ref(true); // 用户名密码模式
const ruleForm = reactive({
  username: 'user1',
  password: 'password1',
  phone: '',
  code: ''
});
const rules = reactive({
  username: [{ required: true, message: '用户名必填', trigger: 'blur' }, { min: 2, max: 25, message: '长度在2-25之间', trigger: 'blur' }],
  password: [{ required: true, message: '密码必填', trigger: 'blur' }, { min: 6, max: 25, message: '长度在6-25之间', trigger: 'blur' }],
  phone: [{ required: true, message: '电话号码必填', trigger: 'blur' }, { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }],
  code: [{ required: true, message: '验证码必填', trigger: 'blur' }, { min: 4, max: 6, message: '验证码长度在4-6之间', trigger: 'blur' }],
});

const switchToPhoneCode = (b: boolean) => {
  formMode.value = b;
  ruleForm.username = '';
  ruleForm.password = '';
  ruleForm.phone = '';
  ruleForm.code = '';
};

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      let data = {
        username: ruleForm.username,
        password: ruleForm.password
      }
      let res = await requests.post('/login', data, PostHeadersType.formurlencoded);
      if(res.code === 0){
        router.push('/');
      } 
    }
  })
}

</script>

<template>
  <div class="l-wrapper">
    <div class="l-bg1">
    </div>
    <div class="l-bg2">
    </div>
    <div class="l-bg3">
    </div>
    <div class="l-bg4">
    </div>
    <div class="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
      <div class="sm:mx-auto sm:w-full sm:max-w-md">
        <!--        <img class="mx-auto h-12 w-auto"-->
        <!--             src="https://i.imgur.com/7VadfzF.png" alt="Your Company">-->
        <h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">vue3+webpack5+ts</h2>
      </div>

      <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10 ">
          <h2 class="text-center text-2xl font-bold tracking-tight text-gray-600">用户登录</h2>
          <el-form ref="ruleFormRef" style="max-width: 600px;text-align: left" :model="ruleForm" status-icon
            :rules="rules" label-width="auto" class=" mt-6" label-position="top" size="large">
            <el-form-item label="用户名" prop="username" v-if="formMode">
              <el-input v-model="ruleForm.username" type="text" autocomplete="off" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="密码" prop="password" v-if="formMode">
              <el-input v-model="ruleForm.password" type="password" autocomplete="off" placeholder="请输入密码" />
            </el-form-item>
            <el-form-item label="电话号码" prop="phone" v-if="formMode === false">
              <el-input v-model="ruleForm.phone" type="text" autocomplete="off" placeholder="请输入电话号码" />
            </el-form-item>
            <el-form-item label="验证码" prop="code" v-if="formMode === false">
              <el-input v-model="ruleForm.code" type="text" autocomplete="off" placeholder="请输入验证码" />
            </el-form-item>
            <el-form-item>
              <button type="submit" class="l-btn" @click="submitForm(ruleFormRef)">登录</button>
            </el-form-item>
          </el-form>
          <div class="mt-6">
            <div class="relative">
              <div class="absolute inset-0 flex items-center">
                <div class="w-full border-t border-gray-300"></div>
              </div>
              <div class="relative flex justify-center text-sm">
                <span class="px-2 text-gray-500">使用其他方式登录</span>
              </div>
            </div>

            <div class="mt-6 grid grid-cols-3 gap-3">
              <div>
                <a href="javascript:void(0);" class="icon" @click="switchToPhoneCode(false)" v-if="formMode">
                  <icon-item :width="100" placement="bottom" content="使用手机登录">
                    <i class="iconfont icon-dianhua"></i>
                  </icon-item>
                </a>
                <a href="javascript:void(0);" class="icon" @click="switchToPhoneCode(true)" v-else>
                  <icon-item :width="100" placement="bottom" content="使用账号登录">
                    <i class="iconfont icon-zhanghaoquanxianguanli"></i>
                  </icon-item>
                </a>
              </div>

              <div>
                <a href="javascript:void(0);" class="icon">
                  <icon-item :width="100" placement="bottom" content="使用QQ登录">
                    <i class="iconfont icon-QQ"></i>
                  </icon-item>
                </a>
              </div>

              <div>
                <a href="javascript:void(0);" class="icon">
                  <icon-item :width="100" placement="bottom" content="使用微信登录">
                    <i class="iconfont icon-weixin"></i>
                  </icon-item>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

.l-wrapper {
  @apply relative h-screen bg-gray-50 overflow-hidden;

  .l-bg1 {
    @apply absolute top-20 left-2 w-[500px] h-[500px] bg-[#D1208A80] rounded-full mix-blend-multiply filter blur-[150px] opacity-70 animate-blob;
  }

  .l-bg2 {
    @apply absolute top-20 right-32 w-[500px] h-[500px] bg-[#FFB20080] rounded-full mix-blend-multiply filter blur-[150px] opacity-70 animate-blob animation-delay-2000
  }

  .l-bg-3 {
    @apply hidden xl:block absolute bottom-10 left-32 w-[500px] h-[500px] bg-[#FFB20080] rounded-full mix-blend-multiply filter blur-[150px] opacity-70 animate-blob animation-delay-4000
  }

  .l-bg4 {
    @apply absolute bottom-10 right-52 w-[500px] h-[500px] bg-[#CAEEF580] rounded-full mix-blend-multiply filter blur-[150px] opacity-70 animate-blob animation-delay-4000
  }

  .l-btn {
    @apply flex w-full justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2
  }

  .icon {
    @apply inline-flex w-full justify-center rounded-md border border-gray-300 bg-white py-2 px-4 text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50 cursor-pointer
  }
}
</style>